<template>
    <el-col :span="Number(colspan)">
        <el-form-item
                :prop="name"
                :label-width="labelWidth + 'px'"
                :label="label"
                :title="label"
                :id="'sel' + name"
                v-show="property.p.indexOf('H') === -1">
            <el-select :disabled="property.p.indexOf('D') >= 0"
                       :multiple="multiple"
                       @change="onChange"
                       :filter-method="search"
                       :filterable="!multiple"
                       @visible-change="selectData"
                       :id="'select' + name"
                       :name="name"
                       clearable
                       @clear="clear"
                       v-model="selectVal"
                       style="position: relative;"
                       :placeholder="placeholder">
                <el-option
                        v-for="(item, index) in list"
                        :key="item.key"
                        :title="item.key + ' - ' + item.value"
                        :label="item.value"
                        :value="item.key">
                    <span style="float: left">{{ item.key }} - {{ item.value }}</span>
                </el-option>
                <div class="ep-pagination-column" v-show="!selectClick && isPage || isPageFilter">
                    <div class="el-pagination is-background" v-show="isPage">
                        <span class="el-pagination__total">共 {{ lists && lists.total || 0 }} 条</span>
                        <button type="button" class="btn-prev" @click="prev"><i
                                class="el-icon el-icon-arrow-left"></i>
                        </button>
                        <button type="button" class="btn-next" @click="next"><i
                                class="el-icon el-icon-arrow-right"></i>
                        </button>
                    </div>
                    <div class="el-pagination is-background" v-show="isPageFilter">
                        <span class="el-pagination__total">共 {{ lists && lists.total || 0 }} 条</span>
                        <button type="button" class="btn-prev" @click="prev">
                            <i class="el-icon el-icon-arrow-left"></i>
                        </button>
                        <button type="button" class="btn-next" @click="next">
                            <i class="el-icon el-icon-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </el-select>
        </el-form-item>
    </el-col>
</template>

<script type="es6">
    export default {
        props: {
            colspan: {
                type: String,
                default: '24'
            },
            labelWidth: {
                type: String,
                default: '140'
            },
            label: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default: ''
            },
            codetype: {
                type: String,
                default: ""
            },
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        key: '',
                        p: ''
                    }
                }
            },
            datas: {
                type: Object,
                default: null
            },
            name: {
                type: String,
                default: ''
            },
            isChange: {
                type: Boolean,
                default: false
            },
            isClick: {
                type: Boolean,
                default: false
            },
            isBlur: {
                type: Boolean,
                default: false
            },
            isFocus: {
                type: Boolean,
                default: false
            },
            isPage: {
                type: Boolean,
                default: false
            },
            isPageFilter: {
                type: Boolean,
                default: false
            },
            SelectFilterData: {
                type: String,
                default: ""
            },
            pageData: {
                type: String,
                default: 'formData'
            },
            api: {
                type: String,
                default: ''
            },
            isRed: {
                type: Boolean,
                default: false
            },
            isCodeType: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean,
                default: false
            },
            selectClick: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                show: false,
                pager: {
                    page: 0,
                    size: 5
                },
                text: '',
                selectList: [],
                selValue: '',
                time: null,
                selectVal: '',
                id: ''
            }
        },
        computed: {
            lists() {
                return this.$store.getters.common;
            },
            list() {
                if (this.selectClick && this.isPage || this.isPageFilter) {
                    return this.lists && this.lists.selectData || [];
                }
                return this.selectList || [];
            },
            codeTypes: {
                get: function () {
                    console.log(this.$store.getters.codeTypes && this.$store.getters.codeTypes.id)
                    let codeTypes = sessionStorage.getItem(this.$route.path) && JSON.parse(sessionStorage.getItem(this.$route.path)) || null;
                    return codeTypes;
                },
                set: function (newVal) {
                    if (newVal === null) return;
                    clearInterval(this.time);
                    if (this.$route.query.keepAlive === false) {
                        this.getValue(newVal);
                    }
                    this.selData(newVal[this.codetype]);
                    return newVal;
                }
            }
        },
        watch: {
            lists: {
                handler(value) {
                    return value;
                },
                deep: true
            },
            datas: {
                handler(value) {
                    Object.keys(value).forEach(key => {
                        if (typeof value[key] === 'object') {
                            if (!value[key]) return;
                            if (!value[key][this.name]) return;
                            if (value[key][this.name].value === '') return;
                            this.selectValue(value[key][this.name].value);
                        }
                    });
                },
                deep: true
            },
            codeTypes: {
                handler(value) {
                    this.getValue(value);
                },
                deep: true
            },
            // selectVal: {
            //     handler(value) {
            //         if (value) {
            //             if (this.multiple) {
            //                 if (!Array.isArray(value)) {
            //                     this.property.key = value.split(',') || [];
            //                 } else {
            //                     this.property.key = value && value.join(',') || '';
            //                 }
            //             } else {
            //                 this.property.key = value;
            //             }
            //         } else {
            //             this.property.key = '';
            //             this.property.value = '';
            //             return '';
            //         }
            //     },
            //     deep: true
            // },
            'property.key': {
                handler(value) {
                    if (this.multiple) {
                        if (!Array.isArray(value)) {
                            // this.selectVal = value.split(',');
                        } else {
                            this.selectVal = value && value.join(',') || '';
                        }
                    } else {
                        this.selectVal = value;
                    }
                    this.property.value = value;
                },
                deep: true
            }
        },
        mounted() {
            document.getElementById('select' + this.name).style.color = this.isRed ? 'red' : '';
            let self = this;
            this.time = setInterval(() => {
                self.codeTypes = sessionStorage.getItem(this.$route.path) && JSON.parse(sessionStorage.getItem(this.$route.path)) || null;
            }, 100);
        },
        methods: {
            getValue(codeTypes) {
                if (this.codetype) {
                    if (this.multiple) {
                        if (Array.isArray(this.property.key)) {
                            let list = [];
                            this.property.key.forEach(item => {
                                list.push(item);
                            });
                            this.selectVal = list;
                        } else {
                            this.selectVal = this.property.key && this.property.key.split(',') || [];
                        }
                    } else {
                        this.selectVal = this.property.key;
                    }
                    this.selData(codeTypes[this.codetype]);
                }
            },
            // 清除
            clear() {
                if (this.multiple) {
                    this.property.key = [];
                } else {
                    this.property.key = '';
                }
            },
            // 搜索
            search(val) {
                if (val) {
                    this.selectList = [];
                    this.codeTypes[this.codetype].filter(item => {
                        if (!!~item.key.indexOf(val) || !!~item.value.indexOf(val)) {
                            this.selectList.push({
                                key: item.key,
                                value: item.value
                            });
                        }
                    });
                } else {
                    this.selectList = this.codeTypes[this.codetype];
                }
            },
            // 选择值操作
            onChange(val) {
                if (Array.isArray(val)) {
                    this.property.key = val.join(',') || '';
                    this.property.value = val.join(',') || '';
                } else {
                    this.property.key = val;
                    this.property.value = val;
                }
                if (!this.isChange) return;
                let obj = {
                    path: this.$route.path + '/doCheck/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                if (this.isCodeType) {
                    obj.params.codeTypes = this.codeTypes || sessionStorage.getItem(this.$route.path) && JSON.parse(sessionStorage.getItem(this.$route.path)) || null;
                }
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            // 上一页
            prev() {
                if (this.pager.page === 0) return;
                this.pager.page -= 1;
                this.selectData();
            },
            // 下一页
            next() {
                if (this.pager.page === Math.floor(this.lists.total / this.pager.size)) return;
                this.pager.page += 1;
                this.selectData();
            },
            selData(value) {
                if (value !== undefined && value && value.length > 0) {
                    this.selectList = value;
                }
            },
            selectValue(value) {
                // if (this.isPage) return;
                this.selectList && this.selectList.forEach(item => {
                    if (item.key === value) {
                        this.selValue = item.value;
                    }
                });
            },
            // 数据请求
            selectData(val) {
                val = val === undefined ? true : val;
                let obj = {
                    path: '',
                    params: {
                        codeTypes: {}
                    }
                };
                if (!val) return;

                let codeTypes = this.codeTypes || sessionStorage.getItem(this.$route.path) && JSON.parse(sessionStorage.getItem(this.$route.path)) || null;
                if (codeTypes === null) return;
                Object.keys(codeTypes).forEach(item => {
                    if (item !== codeTypes) {
                        obj.params.codeTypes[codeTypes] = [];
                    }
                });
                if (!this.selectClick && !this.isPage && !this.isPageFilter) {
                    this.selectList = codeTypes[this.codetype] || [];
                } else if (this.isPageFilter || this.selectClick) {
                    let a = this.SelectFilterData;

                    let count = a.split(":").length;
                    let filterdatanew = a;

                    for (let i = 1; i < count; i++) {
                        let ind = filterdatanew.indexOf("':");
                        let end = filterdatanew.substring(ind + 2).indexOf("'");
                        let zi = filterdatanew.substring(ind + 2, ind + 2 + end);
                        let filtervaule = this.datas[this.pageData][zi].value;
                        filterdatanew = filterdatanew.substring(0, ind + 1) + filtervaule + filterdatanew.substring(ind + 2 + end);
                    }
                    let obj = {
                        path: this.api !== '' ? this.api : '/codetype/' + this.codetype + '/listfilter',
                        params: {
                            path: this.$route.path,
                            page: this.pager.page,
                            size: this.pager.size,
                            selectFilterData: window.btoa(filterdatanew)
                        }
                    };
                    if (this.codetype) {
                        obj.params.codeTypes = codeTypes;
                    }
                    this.$store.dispatch('SET_COMMONPOST', obj);
                } else {
                    obj = {
                        path: this.api !== '' ? this.api : '/codetype/' + this.codetype + '/list',
                        params: {
                            path: this.$route.path,
                            page: this.pager.page,
                            size: this.pager.size
                        }
                    };
                    if (this.codetype) {
                        obj.params.codeTypes = codeTypes;
                    }
                    this.$store.dispatch('SET_COMMONPOST', obj);
                }
            }

        }
    }
</script>

<style lang="less" scoped>
    .input-focus {
        border: 1px solid #4ca2fb;
    }

    .active {
        color: #3BB2FF;
        font-weight: 700;
        background-color: #E1F9FF;
    }

    .ac {
        background-color: #E1F9FF;
        color: #3BB2FF;
        font-weight: 700;
    }

    .ep-select .ep-scrollbar li:hover {
        background-color: #E1F9FF;
        color: #3BB2FF;
    }

    .ep-input-search {
        width: 100%;
        /deep/ .el-input__inner {
            border: 0 !important;
        }
    }

    .ep-select {
        /deep/ .el-input__inner {
            border: 0;
            height: inherit;
        }
        .el-input__suffix-inner {
            .el-icon-error {
                display: none;
            }
        }
        &:hover /deep/ .el-input__suffix-inner {
            .el-icon-error {
                display: block;
                font-size: 14px;
            }
        }
    }

    .ep-select .ep-scrollbar .el-pagination {
        border-top: 0;
        padding-top: 0;
    }

    .ep-pagination-column {
        border-top: 1px solid #efefef;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 5px;
    }

    /deep/ .el-select {
        width: 100%;
        min-height: 40px;
        /*line-height: 40px;*/
        /*.el-select__tags {*/
        /*overflow: hidden;*/
        /*span {*/
        /*width: 80%;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*.el-tag:nth-child(1) {*/
        /*width: auto;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*overflow: hidden;*/
        /*flex: 1;*/
        /*.el-select__tags-text {*/
        /*width: 70%;*/
        /*display: inline-block;*/
        /*overflow: hidden;*/
        /*flex: none;*/
        /*}*/
        /*}*/
        /*.el-tag:nth-child(2) {*/
        /*width: auto;*/
        /*flex: none;*/
        /*.el-select__tags-text {*/
        /*width: 20px;*/
        /*flex: none;*/
        /*}*/
        /*}*/
        /*}*/
        /*}*/
    }

    /deep/ .is-error .el-input.is-disabled .el-input__inner {
        border-color: #f56c6c;
    }

    @media screen and (min-width: 410px) and (max-width: 1366px) {

        /deep/ .el-select {
            min-height: 30px;
            /*line-height: 30px;*/
        }
    }
</style>
